<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h2>使用方法</h2>
            <p style="line-height: 50px;">
            直接通过设置类名为el-icon-iconName来使用即可。例如：(共{{iconList.length}}个图标)
            </p>
            <p class="example-p">
                <i class="el-icon-loading" style="font-size: 30px;color: #ff5900"></i>
                <span>&lt;i class=&quot;el-icon-loading&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-sort" style="font-size: 30px;color:#fd5656"></i>
                <span>&lt;i class=&quot;el-icon-sort&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-s-flag" style="font-size: 30px;color: #ffc300"></i>
                <span>&lt;i class=&quot;el-icon-s-flag&quot;&gt;&lt;/i&gt;</span>
            </p>
            <br>
            <h2>图标</h2>
            <div class="search-box">
                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
            </div>
            <ul>
                <li class="icon-li" v-for="(item,index) in list" :key="index">
                    <div class="icon-li-content">
                        <i :class="`el-icon-${item}`"></i>
                        <span>{{item}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
    export default {
        name: 'Icon',
        data () {
            return {
                keyword: '',
                iconList: [
                    'platform-eleme',
                    'eleme',
                    'delete-solid',
                    'delete',
                    's-tools',
                    'setting',
                    'user-solid',
                    'user',
                    'phone',
                    'phone-outline',
                    'more',
                    'more-outline',
                    'star-on',
                    'star-off',
                    's-goods',
                    'goods',
                    'warning',
                    'warning-outline',
                    'delete',
                    's-tools',
                    'star-off',
                    'remove',
                    'circle-plu',
                    'success',
                    'error',
                    'zoom-in',
                    'zoom-out',
                    'remove-outline',
                    'plus-outline',
                    'circle-check',
                    'circle-close',
                    's-help',
                    'help',
                    'minus',
                    'plus',
                    'check',
                    'close',
                    'picture',
                    'picture-outline',
                    'picture-outline-round',
                    'upload',
                    'upload2',
                    'download',
                    'camera-solid',
                    'camera',
                    'video-camera-solid',
                    'video-camera',
                    'message-solid',
                    'bell',
                    's-cooperation',
                    's-order',
                    's-platform',
                    's-fold',
                    's-unfold',
                    's-operation',
                    's-promotion',
                    's-home',
                    's-release',
                    's-ticket',
                    's-management',
                    's-open',
                    's-shop',
                    's-marketing',
                    's-flag',
                    's-comment',
                    's-finance',
                    's-claim',
                    's-custom',
                    's-opportunity',
                    's-data',
                    's-check',
                    's-grid',
                    'menu',
                    'share',
                    'd-caret',
                    'caret-left',
                    'caret-right',
                    'caret-bottom',
                    'caret-top',
                    'bottom-left',
                    'bottom-right',
                    'back',
                    'right',
                    'bottom',
                    'top',
                    'top-left',
                    'top-right',
                    'arrow-left',
                    'arrow-right',
                    'arrow-down',
                    'arrow-up',
                    'd-arrow-left',
                    'd-arrow-right',
                    'video-pause',
                    'video-play',
                    'refresh',
                    'refresh-right',
                    'refresh-left',
                    'finished',
                    'sort',
                    'sort-up',
                    'sort-down',
                    'rank',
                    'loading',
                    'view',
                    'c-scale-to-original',
                    'date',
                    'edit',
                    'edit-outline',
                    'folder',
                    'folder-opened',
                    'folder-add',
                    'folder-remove',
                    'folder-delete',
                    'folder-checked',
                    'tickets',
                    'document-remove',
                    'document-delete',
                    'food',
                    'goblet',
                    'orange',
                    'coffee',
                    'ice-tea',
                    'milk-tea',
                    'ice-cream-round'
                ]
            }        
        },
        computed: {
            // 功能input输入内容和icon显示对应
            // 思路对iconlist针对input输入内容进行过滤
            list(){
                return this.iconList.filter((item) => {
                    return item.indexOf(this.keyword) !== -1;
                    // item.indexOf('') 都会匹配到
                })
            }
        }
    }
</script>



<style scoped>
    .example-p{
        height: 45px;
        display: flex;
        align-items: center;
    }
    .search-box{
        text-align: center;
        margin-top: 10px;
    }

    .search{
        width: 300px;
    }

    ul,li{
        list-style: none;
    }

    .icon-li{
        display: inline-block;
        padding: 10px;
        width: 120px;
        height: 120px;
    }

    .icon-li-content{
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .icon-li-content i{
        font-size: 30px;
        color: #606266;
    }

    .icon-li-content span{
        margin-top: 10px;
        color: #787878;
    }

    .icon-li-content:hover i,.icon-li-content:hover span{
        /* color: red;  这只能作用content中的文本*/
        /* 这里不需要这样写 .icon-li-content:hover .icon-li-content i*/
        color: rgb(92,182,255);
    }
</style>

<!-- 
.icon-li-content :hover  作用于content下面的子元素
.icon-li-content:hover  作用于content
hover中能作用于子孩子和兄弟节点，作用兄弟节点需要用+
 -->